<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script src="perspective.js"></script>
		<title>test</title>
		<script type="text/javascript">
			//var mapWidth=3503;
			//var mapHeight=2203;
			var watchShift=false;
			var clickX=0;
			var clickY=0;
			var overX=0;
			var overY=0;
			var downX=0;
			var downY=0;
			var watchX=0;
			var watchY=0;
			var shiftX=0;
			var shiftY=0;
			var canvas=undefined;
			var c2d=undefined;
			//var points = [[mapWidth*.2,0],[mapWidth*0.8,0],[mapWidth,mapHeight],[0,mapHeight]];
			//var crumpled=undefined;
			var image=undefined;
			var imageCanvas = document.createElement('canvas');
			function XY(x,y){
				this.x=x;
				this.y=y;
				}
			function XYZ(x,y,z){
				this.x=x;
				this.y=y;
				this.z=z;
				}
			function init(){
				canvas=document.getElementById('workCanvas');
				c2d=canvas.getContext('2d');
				
				image=document.getElementById("runner");
				imageCanvas=document.createElement('canvas');
				imageCanvas.width=image.width;
				imageCanvas.height=image.height;
				imageContext=imageCanvas.getContext('2d');
				imageContext.drawImage(image,0,0);
				//c2d.drawImage(image,0,0);
				
				
				//crumpled = new html5jp.perspective(c2d,image);
				draw();
					
				canvas.onclick=function(e){
					watchShift=false;
					clickX=e.pageX-canvas.offsetLeft;
					clickY=e.pageY-canvas.offsetTop;
					//--me.mousePressed.value(false);
					//me.shiftX.value(me.watchX+me.clickX.value()-me.downX.value());
					//me.shiftY.value(me.watchY+me.clickY.value()-me.downY.value());
					draw();
					};
				canvas.onmousemove=function(e){
					overX=e.pageX-canvas.offsetLeft;
					overY=e.pageY-canvas.offsetTop;
					if(watchShift){
						shiftX=watchX+overX-downX;
						shiftY=watchY+overY-downY;
						draw();
						}
					};
				canvas.onmousedown=function(e){
					downX=e.pageX-canvas.offsetLeft;
					downY=e.pageY-canvas.offsetTop;
					watchX=shiftX;
					watchY=shiftY;
					//me.mousePressed.value(true);
					watchShift=true;
					};				
				};
			/*function xy(cuX,cuY,x,y,width,height,wPerspective,hPerspective,pivotX,pivotY){
				var dx=cuX-x;
				var dy=cuY-y;
				var ry=y+hPerspective*dy*dy/height+1;
				var rx=x+0.5*width*(1-wPerspective)*(1-ry/(height*hPerspective))
					+dx*(wPerspective+ry/(height*hPerspective)-wPerspective*ry/(height*hPerspective))
					//+dx*(1-wPerspective)*dy/height
					;
				return new XY(rx,ry);
				}*/
			function rect(color,baseX,baseY,x,y,w,h,width,height,wPerspective,hPerspective,pivotX,pivotY){
				var xyLT=xy(x	,y	,baseX,baseY,width,height,wPerspective,hPerspective,pivotX,pivotY);
				var xyRT=xy(x+w	,y	,baseX,baseY,width,height,wPerspective,hPerspective,pivotX,pivotY);
				var xyRB=xy(x+w	,y+h	,baseX,baseY,width,height,wPerspective,hPerspective,pivotX,pivotY);
				var xyLB=xy(x	,y+h	,baseX,baseY,width,height,wPerspective,hPerspective,pivotX,pivotY);
				c2d.fillStyle=color;
				c2d.beginPath();
				c2d.moveTo(xyLT.x,xyLT.y);
				c2d.lineTo(xyRT.x,xyRT.y);
				c2d.lineTo(xyRB.x,xyRB.y);
				c2d.lineTo(xyLB.x,xyLB.y);
				c2d.closePath();
				c2d.fill();
				}
			function draw(){
				c2d.clearRect(0,0,1200,800);
				c2d.fillStyle='#123456';
				c2d.fillRect(0,0,1200,800);
				
				var x=100;
				var y=150;
				var width=300;
				var height=200;
				var pivotX=0.3;
				var pivotY=0.7;
				var wPerspective=0.5;
				var hPerspective=0.7;
				
				c2d.fillStyle="#ff0000";
				c2d.beginPath();
				c2d.moveTo(x, y);
				c2d.lineTo(x+width,y);
				c2d.lineTo(x+width,y+height);
				c2d.lineTo(x,y+height);
				c2d.closePath();
				c2d.fill();
				
				rect("#000066",x,y,x,y,width,height	,width,height,wPerspective,hPerspective,pivotX,pivotY);
				rect("#009999",x,y,100,150,50,50	,width,height,wPerspective,hPerspective,pivotX,pivotY);
				rect("#009999",x,y,350,150,50,50	,width,height,wPerspective,hPerspective,pivotX,pivotY);
				rect("#009999",x,y,350,300,50,50	,width,height,wPerspective,hPerspective,pivotX,pivotY);
				rect("#009999",x,y,100,300,50,50	,width,height,wPerspective,hPerspective,pivotX,pivotY);
				rect("#009999",x,y,225,150,50,50	,width,height,wPerspective,hPerspective,pivotX,pivotY);
				rect("#009999",x,y,225,300,50,50	,width,height,wPerspective,hPerspective,pivotX,pivotY);
				rect("#009999",x,y,100,225,50,50	,width,height,wPerspective,hPerspective,pivotX,pivotY);
				rect("#009999",x,y,350,225,50,50	,width,height,wPerspective,hPerspective,pivotX,pivotY);
				rect("#009999",x,y,225,225,50,50	,width,height,wPerspective,hPerspective,pivotX,pivotY);
				
				/*var xyLT=xy(x		,y		,x,y,width,height,wPerspective,hPerspective,pivotX,pivotY);
				var xyRT=xy(x+width	,y		,x,y,width,height,wPerspective,hPerspective,pivotX,pivotY);
				var xyRB=xy(x+width	,y+height	,x,y,width,height,wPerspective,hPerspective,pivotX,pivotY);
				var xyLB=xy(x		,y+height	,x,y,width,height,wPerspective,hPerspective,pivotX,pivotY);
				c2d.fillStyle="#0000ff";
				c2d.beginPath();
				c2d.moveTo(xyLT.x,xyLT.y);
				c2d.lineTo(xyRT.x,xyRT.y);
				c2d.lineTo(xyRB.x,xyRB.y);
				c2d.lineTo(xyLB.x,xyLB.y);
				c2d.closePath();
				c2d.fill();*/
				
				/*
				c2d.moveTo(x+halfWidthDiff, y);
				c2d.lineTo(x+width-halfWidthDiff,y);
				c2d.lineTo(x+width,y+height*hPerspective);
				c2d.lineTo(x,y+height*hPerspective);
				c2d.closePath();
				c2d.fill();
				*/
				
				/*var pw=1100;
				var topw=700;
				var ph=500;
				var pivotX=500;
				//pw/2-shiftX;
				var pivotY=300;
				var widthStep=(pw-topw)/ph;
				var yStep=image.height/ph;
				var preY=0;
				var xDelta=(2*(pivotX-shiftX)/pw)*((pw-topw)/ph)/2;
				
				var xx=shiftX;//if(xx<50)xx=50;
				var yy=shiftY;//if(yy<50)yy=50;
				
				for(var y=0;y<ph;y++){
					var rr=Math.sin((Math.PI/2)*(y/ph));
					var hBlock=rr*image.height;
					if(hBlock-preY>0){
						c2d.drawImage(imageCanvas
							,0,preY,image.width,hBlock-preY
							,xx+((ph-y)*xDelta),yy+y,pw-(widthStep*(ph-y)),1
							);	
						preY=hBlock;
						}
					}*/
				}
		function _p3d(point,camera,viewer,ray){
			//var point=new XYZ(30,30,0);//the 3D position of a point A that is to be projected
			//var camera=new XYZ(0,0,-100);//the 3D position of a point C representing the camera
			//var ray=new XYZ(0,0,0);//the orientation of the camera (represented, for instance, by Tait–Bryan angles)
			//var viewer=new XYZ(0,0,-20);//the viewer's position relative to the display surface
			var d=new XYZ(0,0,0);//the 2D projection of 'a'
			var b=new XY(0,0);//result
			d.x=Math.cos(ray.y)*(Math.sin(ray.z)*(point.y-camera.y)+Math.cos(ray.z)*(point.x-camera.x))-Math.sin(ray.y)*(point.z-camera.z);
			d.y=Math.sin(ray.x)*(Math.cos(ray.y)*(point.z-camera.z)+Math.sin(ray.y)*(Math.sin(ray.z)*(point.y-camera.y)+Math.cos(ray.z)*(point.x-camera.x)))+Math.cos(ray.x)*(Math.cos(ray.z)*(point.y-camera.y)-Math.sin(ray.z)*(point.x-camera.x));
			d.z=Math.cos(ray.x)*(Math.cos(ray.y)*(point.z-camera.z)+Math.sin(ray.y)*(Math.sin(ray.z)*(point.y-camera.y)+Math.cos(ray.z)*(point.x-camera.x)))-Math.sin(ray.x)*(Math.cos(ray.z)*(point.y-camera.y)-Math.sin(ray.z)*(point.x-camera.x));
			b.x=(d.x-viewer.x)*(viewer.z/d.z);
			b.y=(d.y-viewer.y)*(viewer.z/d.z);
			return b;
			}
		function statical3d100(point){
			var camera=new XYZ(0,0,300);//the 3D position of a point C representing the camera
			var ray=new XYZ(1*Math.PI,0*Math.PI,0*Math.PI);//the orientation of the camera (represented, for instance, by Tait–Bryan angles)
			var viewer=new XYZ(0,0,600);//the viewer's position relative to the display surface
			var d=new XYZ(0,0,0);//the 2D projection of 'a'
			var b=new XY(0,0);//result
			d.x=Math.cos(ray.y)*(Math.sin(ray.z)*(point.y-camera.y)+Math.cos(ray.z)*(point.x-camera.x))-Math.sin(ray.y)*(point.z-camera.z);
			d.y=Math.sin(ray.x)*(Math.cos(ray.y)*(point.z-camera.z)+Math.sin(ray.y)*(Math.sin(ray.z)*(point.y-camera.y)+Math.cos(ray.z)*(point.x-camera.x)))+Math.cos(ray.x)*(Math.cos(ray.z)*(point.y-camera.y)-Math.sin(ray.z)*(point.x-camera.x));
			d.z=Math.cos(ray.x)*(Math.cos(ray.y)*(point.z-camera.z)+Math.sin(ray.y)*(Math.sin(ray.z)*(point.y-camera.y)+Math.cos(ray.z)*(point.x-camera.x)))-Math.sin(ray.x)*(Math.cos(ray.z)*(point.y-camera.y)-Math.sin(ray.z)*(point.x-camera.x));
			b.x=(d.x-viewer.x)*(viewer.z/d.z);
			b.y=(d.y-viewer.y)*(viewer.z/d.z);
			return b;
			}
		function test(){
			/*var a=new XYZ(30,30,0);//the 3D position of a point A that is to be projected
			var c=new XYZ(0,0,-100);//the 3D position of a point C representing the camera
			var q=new XYZ(0,0,0);//the orientation of the camera (represented, for instance, by Tait–Bryan angles)
			var e=new XYZ(0,0,-20);//the viewer's position relative to the display surface
			var d=new XYZ(0,0,0);//the 2D projection of 'a'
			var b=new XY(0,0);//result
			d.x=Math.cos(q.y)*(Math.sin(q.z)*(a.y-c.y)+Math.cos(q.z)*(a.x-c.x))-Math.sin(q.y)*(a.z-c.z);
			d.y=Math.sin(q.x)*(Math.cos(q.y)*(a.z-c.z)+Math.sin(q.y)*(Math.sin(q.z)*(a.y-c.y)+Math.cos(q.z)*(a.x-c.x)))+Math.cos(q.x)*(Math.cos(q.z)*(a.y-c.y)-Math.sin(q.z)*(a.x-c.x));
			d.z=Math.cos(q.x)*(Math.cos(q.y)*(a.z-c.z)+Math.sin(q.y)*(Math.sin(q.z)*(a.y-c.y)+Math.cos(q.z)*(a.x-c.x)))-Math.sin(q.x)*(Math.cos(q.z)*(a.y-c.y)-Math.sin(q.z)*(a.x-c.x));
			b.x=(d.x-e.x)*(e.z/d.z);
			b.y=(d.y-e.y)*(e.z/d.z);
			alert(""+Math.round(b.x)+"x"+Math.round(b.y)+" / "+Math.round(d.x)+"x"+Math.round(d.y)+"x"+Math.round(d.z));*/
			//var c=new XYZ(0,0,100);//the 3D position of a point C representing the camera
			//var q=new XYZ(1*Math.PI,0*Math.PI,0*Math.PI);//the orientation of the camera (represented, for instance, by Tait–Bryan angles)
			//var e=new XYZ(0,0,100);//the viewer's position relative to the display surface
			var b1=statical3d100(new XYZ(-30,30,50));
			var b2=statical3d100(new XYZ(30,30,50));
			var b3=statical3d100(new XYZ(30,-30,50));
			var b4=statical3d100(new XYZ(-30,-30,50));
			var b5=statical3d100(new XYZ(-30,30,40));
			var b6=statical3d100(new XYZ(30,30,40));
			var b7=statical3d100(new XYZ(30,-30,40));
			var b8=statical3d100(new XYZ(-30,-30,40));
			
			var center=statical3d100(new XYZ(0,0,0));
			var x3=statical3d100(new XYZ(20,0,0));
			var y3=statical3d100(new XYZ(0,20,0));
			var z3=statical3d100(new XYZ(0,0,20));
			
			var shiftX=300;
			var shiftY=300;
			//alert(b1.x+"x"+b1.y+" / "+b2.x+"x"+b2.y+" / "+b3.x+"x"+b3.y+" / "+b4.x+"x"+b4.y);
			
			canvas=document.getElementById('workCanvas');
			c2d=canvas.getContext('2d');
			
			c2d.fillStyle="#ff0000";
			c2d.textBaseline="top";
			c2d.fillText(b1.x+" x "+b1.y,0,0);
			c2d.fillText(b2.x+" x "+b2.y,0,10);
			c2d.fillText(b3.x+" x "+b3.y,0,20);
			c2d.fillText(b4.x+" x "+b4.y,0,30);
			c2d.fillText(b5.x+" x "+b5.y,0,40);
			c2d.fillText(b6.x+" x "+b6.y,0,50);
			c2d.fillText(b7.x+" x "+b7.y,0,60);
			c2d.fillText(b8.x+" x "+b8.y,0,70);
			
			c2d.fillText(x3.x+" x "+x3.y,0,80);
			c2d.fillText(y3.x+" x "+y3.y,0,90);
			c2d.fillText(z3.x+" x "+z3.y,0,100);
			
			c2d.fillText("x",shiftX+x3.x,shiftY+x3.y);
			c2d.fillText("y",shiftX+y3.x,shiftY+y3.y);
			c2d.fillText("z",shiftX+z3.x,shiftY+z3.y);
			
			c2d.beginPath();
			
			
			c2d.moveTo(shiftX+center.x,shiftY+center.y);c2d.lineTo(shiftX+x3.x,shiftY+x3.y);
			c2d.moveTo(shiftX+center.x,shiftY+center.y);c2d.lineTo(shiftX+y3.x,shiftY+y3.y);
			c2d.moveTo(shiftX+center.x,shiftY+center.y);c2d.lineTo(shiftX+z3.x,shiftY+z3.y);
			
			c2d.strokeStyle="#009900";
			c2d.stroke();
			c2d.closePath();
			
			c2d.beginPath();
			//c2d.strokeStyle="#ff0000";
			
			
			c2d.moveTo(shiftX+b1.x,shiftY+b1.y);
			c2d.lineTo(shiftX+b2.x,shiftY+b2.y);
			c2d.lineTo(shiftX+b3.x,shiftY+b3.y);
			c2d.lineTo(shiftX+b4.x,shiftY+b4.y);
			c2d.lineTo(shiftX+b1.x,shiftY+b1.y);
			
			c2d.moveTo(shiftX+b5.x,shiftY+b5.y);
			c2d.lineTo(shiftX+b6.x,shiftY+b6.y);
			c2d.lineTo(shiftX+b7.x,shiftY+b7.y);
			c2d.lineTo(shiftX+b8.x,shiftY+b8.y);
			c2d.lineTo(shiftX+b5.x,shiftY+b5.y);
			
			c2d.moveTo(shiftX+b1.x,shiftY+b1.y);c2d.lineTo(shiftX+b5.x,shiftY+b5.y);
			c2d.moveTo(shiftX+b2.x,shiftY+b2.y);c2d.lineTo(shiftX+b6.x,shiftY+b6.y);
			c2d.moveTo(shiftX+b3.x,shiftY+b3.y);c2d.lineTo(shiftX+b7.x,shiftY+b7.y);
			c2d.moveTo(shiftX+b4.x,shiftY+b4.y);c2d.lineTo(shiftX+b8.x,shiftY+b8.y);
			
			c2d.strokeStyle="#0000ff";
			c2d.stroke();			
			c2d.closePath();
			
			
			c2d.fillText("1",shiftX+b1.x,shiftY+b1.y);
			c2d.fillText("2",shiftX+b2.x,shiftY+b2.y);
			c2d.fillText("3",shiftX+b3.x,shiftY+b3.y);
			c2d.fillText("4",shiftX+b4.x,shiftY+b4.y);
			c2d.fillText("5",shiftX+b5.x,shiftY+b5.y);
			c2d.fillText("6",shiftX+b6.x,shiftY+b6.y);
			c2d.fillText("7",shiftX+b7.x,shiftY+b7.y);
			c2d.fillText("8",shiftX+b8.x,shiftY+b8.y);
			
			var mapX=0;
			var mapY=0;
			var mapZ=0;
			var p1;
			var p2;
			//c2d.save(); // push state on state stack
			//
			
			
				/*p1=statical3d100(new XYZ(-100,-100,0));
				p2=statical3d100(new XYZ(+100,-100,0));
				c2d.moveTo(shiftX+p1.x,shiftY+p1.y);
				c2d.lineTo(shiftX+p2.x,shiftY+p2.y);
				c2d.stroke();*/
				
			var my=-100;
			var ww=15;
			var hh=10;
			c2d.beginPath();
			for(var i=0;i<11;i++){//hor
				p1=statical3d100(new XYZ(-ww*5,my,i*hh-35));
				p2=statical3d100(new XYZ(+ww*5,my,i*hh-35));
				c2d.moveTo(shiftX+p1.x,shiftY+p1.y);
				c2d.lineTo(shiftX+p2.x,shiftY+p2.y);
				//c2d.stroke();
				}
			for(var i=0;i<11;i++){//vert
				p1=statical3d100(new XYZ(i*ww-ww*5,my,-35));
				p2=statical3d100(new XYZ(i*ww-ww*5,my,10*10-35));
				c2d.moveTo(shiftX+p1.x,shiftY+p1.y);
				c2d.lineTo(shiftX+p2.x,shiftY+p2.y);
				//c2d.stroke();
				}
			c2d.strokeStyle="#003300";
			c2d.stroke();
			c2d.closePath();
			
			//c2d.restore();
			c2d.beginPath();
			var m1=statical3d100(new XYZ(-30,-110,50));
			var m2=statical3d100(new XYZ(30,-110,50));
			var m3=statical3d100(new XYZ(30,-110,10));
			var m4=statical3d100(new XYZ(-30,-110,10));
			c2d.moveTo(shiftX+m1.x,shiftY+m1.y);
			c2d.lineTo(shiftX+m2.x,shiftY+m2.y);
			c2d.lineTo(shiftX+m3.x,shiftY+m3.y);
			c2d.lineTo(shiftX+m4.x,shiftY+m4.y);
			c2d.lineTo(shiftX+m1.x,shiftY+m1.y);
			c2d.strokeStyle="#ff3399";
			c2d.stroke();
			c2d.closePath();
			
			}
		</script>
	</head>
	<body onload="test()">
		<canvas id="workCanvas" width="1200" height="800" >0</canvas>
		<img id="runner" src="vk.jpg" style="display:none" />
	</body>
</html>
